<template>
  <el-form
    :model="model"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
    :size="size"
    v-bind="$attrs"
  >
    <base-item
      :colOrder="colOrder"
      :itemMeta="itemMeta"
      :ruleMeta="ruleMeta"
      :showCol="showCol"
      :formColSpan="formColSpan"
      :model="model"
      :size="size"
    >
    </base-item>
  </el-form>
</template>

<script lang="ts">
  //  :rules="formRules"
/* eslint-disable vue/no-setup-props-destructure */

  import { defineComponent, ref } from 'vue'
  import { ElForm } from 'element-plus'
  import baseItem from './base-item.vue'

  // 表单控件的属性 
  import { formProps, formController } from '../map'

  export default defineComponent({
    name: 'nf-el-from-div',
    components: {
      baseItem,
      ElForm
    },
    props: {
      ...formProps
    },
    setup (props, context) {
      // console.log('表单控件的props：', props)

      // 获取 $ref
      const formControl = ref(null)
    
      // 获取属性
      const {
        formMeta,
        itemMeta,
        model,
        partModel
      } = props

      // 调用表单的控制类
      const {
        formColSpan, // 确定组件占位
        showCol, // 是否显示字段的对象
        setFormColShow, // 设置组件联动 
      } = formController(formMeta, itemMeta, model, partModel)

      return {
        ...formMeta, // 解构表单的meta，得到 colOrder、itemMeta 等。
        itemMeta,
        showCol, // 是否显示字段的对象
        formColSpan, // 确定组件占位
        // 函数
        setFormColShow, // 设置组件联动
        //
        formControl // 获取表单dom
      }
    }
  })
</script>